<template>
  <div class="about view">
    <div class="header">
      <div class="header-content">
        <div class="image-text" />
        <div class="text">宝宝的到来给您和家庭增添了无比的乐趣！但同时，我们深知宝宝们在成长中会遇到诸多问题，忙碌的您也许有时也无暇顾及，因此，我们希望能通过有效且周到的到家育婴服务来解决这些问题。</div>
      </div>
    </div>

    <div class="content-box">
      <div class="content">
        <div class="top">
          <div class="item flex">
            <img src="/images/about/card-image-first.png" alt="" class="card-image">
            <div class="text">
              <img src="/images/about/card-text-first.png" alt="" class="card-text-image">
              <div class="msg">我们的团队由经过精心挑选和专业培训的服务人员组成，他们不仅仅是家政助手，更是育儿的好伙伴。从新生儿的哺乳保育到幼儿的入园准备，我们为每个成长阶段设计了细致的服务项目，确保在宝宝成长的每一个阶段，都有合适的支持和指导。</div>
            </div>
          </div>
          <div class="item flex">
            <div class="text">
              <img src="/images/about/card-text-two.png" alt="" class="card-text-image">
              <div class="msg left-msg">
                <span class="label">0-6个月哺乳保育期：</span>
                <span>在这个阶段，我们专注于新生儿的日常护理和哺乳指导，帮助您和宝宝 建立健康的生活规律。</span>
              </div>
              <div class="msg left-msg">
                <span class="label">6-14个月辅食添加期：</span>
                <span>随着宝宝逐渐长大，我们提供辅食添加的建议和指导，确保宝宝的营养 全面均衡。</span>
              </div>
              <div class="msg left-msg">
                <span class="label">14-30个月教育实施期：</span>
                <span>通过互动游戏和基础教育活动，引导宝宝学习基本的社交和认知技能。</span>
              </div>
              <div class="msg left-msg">
                <span class="label">30-36个月入园准备期：</span>
                <span>我们通过模拟园所环境和社交活动，帮助宝宝适应未来的学前生活</span>
              </div>
            </div>
            <img src="/images/about/card-image-two.png" alt="" class="card-image">
          </div>
        </div>

        <div class="bottom flex">
          <div class="bottom-item" v-for="(item, index) in list" :key="index">
            <div class="title">{{ item.title }}</div>
            <div class="box flex">
              <div class="box-left">
                <div class="box-left__title">{{ item.label }}</div>
                <div class="box-left__msg">{{ item.msg }}</div>
              </div>
              <div class="btn">预约</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="text-box">
        <div class="title">尊重每个家庭的独特性</div>
        <div class="message">我们深知，每个家庭的文化和育儿观念各不相同。因此，我们始终坚持以尊重和倾听的态度， 与每位家长紧密合作，共同制定适合您宝宝的个性化服务计划。</div>
      </div>
      <app-footer />
    </div>
  </div>
</template>

<script setup>
const list = [
  { title: '全日制', label: 'Full-time', msg: '分享和发现世界的精彩' },
  { title: '白班', label: 'Day shift', msg: '分享和发现世界的精彩' },
]
</script>

<style lang="less" scoped>
.about {
  .header {
    height: 5.36rem;
    width: 100%;
    background: url('/images/about/header.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;

    .header-content {
      position: absolute;
      left: 4.06rem;
      top: 2.01rem;

      .image-text {
        width: 3.3rem;
        height: 1.23rem;
        background: url('/images/about/header-text.png') no-repeat;
        background-size: 100% 100%;
        margin-bottom: .21rem;
      }

      .text {
        width: 6.2rem;
        font-weight: 300;
        font-size: .14rem;
        color: #FFFFFF;
        line-height: .2rem;
      }
    }
  }

  .content-box {
    height: 12.23rem;
    background: linear-gradient(#EAE7E1 0%, #F6F5F2 100%);
    position: relative;

    .content {
      position: absolute;
      left: 3.58rem;
      top: 1.01rem;
      width: 12.05rem;

      .top {
        padding: 0 .24rem;
        margin-bottom: .65rem;

        .item {
          justify-content: space-between;

          &:first-child {
            margin-bottom: 1.24rem;
          }

          .card-image {
            width: 4.52rem;
            height: 3.21rem;
            display: block;

            &:first-child {
              margin-right: .72rem;
            }
          }

          .text {
            .card-text-image {
              width: auto;
              height: .41rem;
              display: block;
              margin-bottom: .16rem;
            }

            .msg {
              font-weight: 400;
              width: 5.8rem;
              font-size: .14rem;
              color: #333333;
              line-height: .32rem;

              &.left-msg {
                width: 6rem;
                font-weight: 300;
                padding-left: 0.12rem;
                position: relative;

                &::before {
                  content: '';
                  width: 0.06rem;
                  height: 0.06rem;
                  background: #333333;
                  border-radius: 50%;
                  position: absolute;
                  left: 0;
                  top: .13rem;
                }

                .label {
                  font-weight: bold;
                }
              }
            }
          }
        }
      }

      .bottom {
        .bottom-item {
          flex: 1;
          height: 2.07rem;
          background: #EEE9E0;
          border-radius: 0.08rem;
          padding: .23rem .51rem .4rem .33rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          color: #333333;
          font-weight: 600;

          .title {
            font-size: .24rem;
          }

          .box {
            align-items: flex-end;
            justify-content: space-between;

            .box-left__title {
              font-size: .3rem;
            }

            .box-left__msg {
              font-size: .14rem;
            }

            .btn {
              width: 1.83rem;
              height: .54rem;
              background: #CF8E79;
              border-radius: 1rem;
              color: #FFFFFF;
              font-size: .18rem;
              text-align: center;
              line-height: .54rem;
              cursor: pointer;
            }
          }

          &:first-child {
            margin-right: .21rem;
          }
        }
      }
    }
  }

  .footer {
    height: 10.22rem;
    background: url('/images/common/footer-bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;

    .text-box {
      position: absolute;
      top: 0.77rem;
      left: 6.4rem;
      text-align: center;
      width: 6.4rem;

      .message {
        color: #A19790;
        font-size: .16rem;
        font-weight: 300;
      }

      .title {
        color: #7A625B;
        font-size: .4rem;
        margin-bottom: .3rem;
        font-weight: 600;
      }
    }

    .app-footer {
      position: absolute;
      top: 3.92rem;
      left: 3.51rem;
    }
  }
}
</style>
